import React, {Component} from 'react'
import {
    View,
    Text,
    StyleSheet,
    TextInput,
    Button,
    AsyncStorage
} from 'react-native'

const key = 'xyz'

export default class AsyncStorageDemoPage extends Component {
    state = {
        content: 'no content',
    }

    render() {
        return <View style={styles.container}>
            <View style={styles.welcome}>
                <TextInput
                    placeHolder={'please input'}
                    style={styles.input}
                    onChangeText={text => {
                        this.value = text
                    }}
                />
            </View>
            <View style={styles.textContainer}>
                <Button
                    style={styles.btn}
                    title={'Save'}
                    onPress={this.setData}
                />
                <Button
                    style={styles.btn}
                    title={'Get'}
                    onPress={this.getData}
                />
            </View>
            <Text>
                {this.state.content}
            </Text>
        </View>
    }

    getData = () => {
        AsyncStorage.getItem(key, (error, value) => {
            this.setState({content: value})
        })
    }
    setData = () => {
        AsyncStorage.setItem(key, this.value)
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    welcome: {
        flexDirection: 'row',
        // flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    input: {
        flex: 0.8,
        borderColor: 'black',
        borderWidth: 1,
        marginRight: 50,
        marginLeft: 10,
    },
    btn: {
        flex: 0.2
    },
    textContainer: {
        // flex: 1,
    }

})
